<!-- Recycle -->
<template>
  <div style="overflow: auto; height: 100%">
    <div
      v-infinite-scroll="load"
      infinite-scroll-immediate="true"
      infinite-scroll-disabled="disabled"
      infinite-scroll-distance="20"
    >
      <TypeShow :imgsId="imgsId" :imgsUrl="imgsUrl"> </TypeShow>
    </div>
    <p v-if="loading">加载中...</p>
    <p v-if="noMore">
      <el-divider content-position="right">没有更多了</el-divider>
    </p>
  </div>
</template>

<script>
import { BASE_URL } from "../config";
import TypeShow from "../components/TypeShow.vue";
export default {
  data() {
    return {
      imgsUrl: [],
      imgsId: [],
      nextPage: 1,
      loading: false,
      noMore: false,
    };
  },
  components: {
    TypeShow,
  },
  computed: {
    disabled() {
      return this.loading || this.noMore;
    },
  },
  methods: {
    load() {
      console.log("times", this.nextPage);
      this.loading = true;
      this.getDeleted();
      setTimeout(() => {
        this.loading = false;
      }, 300);
    },
    async getDeleted() {
      let param = {
        pageNo: this.nextPage,
        pageSize: 25,
      };
      this.nextPage++;
      let res = await this.$get("/imgcenter/recycle/findAllByPage", param);
      this.noMore = this.nextPage > res.data.imagePage["pages"];
      let ImgInfo = res.data.imagePage["records"];
      for (var item of ImgInfo) {
        this.imgsUrl.push(BASE_URL + "/" + item["url"]);
        this.imgsId.push(item["id"]);
      }
    },
  },
  mounted() {
    //console.log('mounted');
    //this.getDeleted();
  },
};
</script>

<style  scoped>
</style>
